<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETF网格交易1.0系统 - 压力测试</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
            padding: 30px;
        }

        .control-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .form-group input, .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s;
            width: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .results-panel {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            border: 1px solid #e9ecef;
        }

        .grid-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .grid-table th, .grid-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #e9ecef;
        }

        .grid-table th {
            background: #2c3e50;
            color: white;
            font-weight: 600;
        }

        .grid-table tr:hover {
            background: #f8f9fa;
        }

        .chart-container {
            margin-top: 30px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .stat-card h3 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .stat-card .value {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }

        .profit { color: #27ae60; }
        .loss { color: #e74c3c; }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>ETF网格交易1.0系统</h1>
            <p>压力测试与交易模拟平台</p>
        </div>

        <div class="main-content">
            <div class="control-panel">
                <h2>参数设置</h2>
                
                <div class="form-group">
                    <label for="etfName">ETF品种</label>
                    <select id="etfName">
                        <option value="中证500">中证500</option>
                        <option value="沪深300">沪深300</option>
                        <option value="创业板指">创业板指</option>
                        <option value="券商指数">券商指数</option>
                        <option value="银行指数">银行指数</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="initialPrice">初始价格</label>
                    <input type="number" id="initialPrice" value="1.0" step="0.01" min="0.01">
                </div>

                <div class="form-group">
                    <label for="gridMode">网格模式</label>
                    <select id="gridMode" onchange="toggleGridInput()">
                        <option value="percentage">百分比模式</option>
                        <option value="fixed">固定步长模式</option>
                    </select>
                </div>

                <div class="form-group" id="percentageGroup">
                    <label for="gridSize">网格大小 (%)</label>
                    <input type="number" id="gridSize" value="5" step="0.5" min="1" max="20">
                </div>

                <div class="form-group" id="fixedGroup" style="display: none;">
                    <label for="gridStep">网格步长 (元)</label>
                    <input type="number" id="gridStep" value="0.05" step="0.01" min="0.01" max="1">
                </div>

                <div class="form-group">
                    <label for="totalAmount">总投入资金</label>
                    <input type="number" id="totalAmount" value="100000" step="1000" min="1000">
                </div>

                <div class="form-group">
                    <label for="maxDecline">最大下跌幅度 (%)</label>
                    <input type="number" id="maxDecline" value="40" step="5" min="10" max="80">
                </div>

                <div class="form-group">
                    <label for="gridCount">网格层数</label>
                    <input type="number" id="gridCount" value="8" step="1" min="3" max="20">
                </div>

                <button class="btn" onclick="runStressTest()">开始压力测试</button>
            </div>

            <div class="results-panel">
                <h2>测试结果</h2>
                
                <div class="stats-grid" id="statsGrid">
                    <!-- 统计卡片将在这里动态生成 -->
                </div>

                <div class="chart-container">
                    <canvas id="priceChart" width="400" height="200"></canvas>
                </div>

                <div class="chart-container">
                    <canvas id="profitChart" width="400" height="200"></canvas>
                </div>

                <table class="grid-table" id="gridTable">
                    <thead>
                        <tr>
                            <th>网格层</th>
                            <th>买入价格</th>
                            <th>卖出价格</th>
                            <th>投入金额</th>
                            <th>预期收益</th>
                            <th>收益率</th>
                        </tr>
                    </thead>
                    <tbody id="gridTableBody">
                        <!-- 网格数据将在这里动态生成 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="grid-trading.js"></script>
    <script>
        // 切换网格输入模式
        function toggleGridInput() {
            const gridMode = document.getElementById('gridMode').value;
            const percentageGroup = document.getElementById('percentageGroup');
            const fixedGroup = document.getElementById('fixedGroup');
            
            if (gridMode === 'percentage') {
                percentageGroup.style.display = 'block';
                fixedGroup.style.display = 'none';
            } else {
                percentageGroup.style.display = 'none';
                fixedGroup.style.display = 'block';
            }
        }
    </script>
</body>
</html>